<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元素拖拽</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .laoda{
      width: 500px;
      height: 500px;
      background-color: red;
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      right: 0;
      margin: auto;
    }
    
    .laoda .laoer{
      width: 300px;
      height: 300px;
      background-color: green;
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      right: 0;
      margin: auto;
    }
    .laoda .laoer .laosan{
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-color: yellow;
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      right: 0;
      margin: auto;
    }
  </style>
</head>
<body>
<div class="laoda">
  <div class="laoer">
    <div class="laosan">我是孻ge</div>
  </div>
</div>
<script>
  var laoda = document.querySelector(".laoda");
  var laoer = document.querySelector(".laoda .laoer");
  var laosan = document.querySelector(".laoda .laoer .laosan");
  
  laoda.addEventListener('click',function (){
    console.log('我是老大');
  })
  laoer.addEventListener('click',function (){
    console.log('我是老er');
  })
  
  laosan.addEventListener('click',function (event){
    //事件对象的兼容处理
    event = event || window.event;
    
    console.log('我是老san');
    //该方法将停止事件的传播,阻止它被分派到其他的 document 节点,
    // 注意,虽然该方法不能阻止同一个 document 节点上
    //的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点.
    event.stopPropagation();
    
  })
  
  //阻止冒泡

</script>
</body>
</html>